<template>
  <el-row class="security fs-14 text-center">
    <el-col class="security-item" :span="24">
      <el-row type="flex" align="middle" style="flex-wrap: wrap;">
        <el-col :xs="24" :sm="24" :md="2" :lg="2">
          登录密码
        </el-col>
        <el-col :xs="24" :sm="24" :md="20" :lg="20">
          已设置。密码长度在 6 到 20 个字符。
        </el-col>
        <el-col :xs="24" :sm="24" :md="2" :lg="2">
          <el-button type="primary" :size="size" plain @click="openUpdatePasswordDialog">修改</el-button>
        </el-col>
      </el-row>
    </el-col>
    <Divider/>
    <el-col class="security-item" :span="24">
      <el-row type="flex" align="middle" style="flex-wrap: wrap;">
        <el-col :xs="24" :sm="24" :md="2" :lg="2">
          安全邮箱
        </el-col>
        <el-col :xs="24" :sm="24" :md="20" :lg="20">
          {{
            userInfo.email ? "您已设置邮箱：" + userInfo.email + "，邮箱可以用来登录、找回密码、接收通知等。" : "您暂未设置邮箱，绑定邮箱可以用来登录、找回密码、接收通知等。"
          }}
        </el-col>
        <el-col :xs="24" :sm="24" :md="2" :lg="2">
          <el-button v-if="userInfo.email" type="primary" :size="size" plain>修改</el-button>
          <el-button v-else type="warning" :size="size" plain>绑定</el-button>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
  <Dialog ref="updatePasswordDialog" title="修改密码" width="300px" @confirm="updatePasswordDialogConfirm">
    <UserUpdatePassword ref="updatePasswordRef" />
  </Dialog>
</template>

<script setup lang="ts">

const size = "small";
const {userInfo} = useStoreToRefs(useStores.user());
const updatePasswordDialog = ref();
const openUpdatePasswordDialog = () => {
  updatePasswordDialog.value.dialogVisible = true;
};
const updatePasswordRef = ref();
const updatePasswordDialogConfirm = () => {
  updatePasswordRef.value.submitForm();
};
</script>

<style scoped lang="scss">
.security {
  .security-item {
    line-height: 2em;
    margin: 10px 0;
  }
}
</style>